// Module for showing dialogs

/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/jquery/jqueryui.d.ts" />

// import localization module
import Loc = require("./Localization");

// import message box
import MsgBox = require("./MessageBox");

declare function SelectSelectableElement(a: any, b: any);

export interface IDictionarySelectedDelegate {
    (file: File): void;
}

export interface ICitySelectedDelegate {
    (file: File): void;
}

// the class implementing dialogs itself
export class Dialog {

    // localization class
    private mLocalization: Loc.Localization;

    // singleton instance
    private static mInstance: Dialog = null;

    // constructor
    public constructor() {
        this.mLocalization = Loc.Localization.Instance;
    }

    // singleton property getter
    public static get Instance() {
        if (Dialog.mInstance == null)
            Dialog.mInstance = new Dialog();
        return Dialog.mInstance;
    }

    // shows the upload dictionary dialog
    public ShowDictionaryUploadDialog(uploadHandler: IDictionarySelectedDelegate) {
        // localize buttons
        var $uploadButtonName = this.mLocalization.Get("Upload");
        var $cancelButtonName = this.mLocalization.Get("Cancel");
        var $noFile = this.mLocalization.Get("NoFile");

        // init dialog buttons
        $("#idChooseFile").button();

        // init choose file handler
        $('#file').change(function () {
            $(this).siblings('.text').text(this.value || $noFile)
        });

        // run the dialog
        $("#idDictionaryUpload").dialog({
            width: 500,
            height: 300,
            modal: true,
            buttons: [
                {
                    id: "btnUpload",
                    text: $uploadButtonName,
                    click: function () {
                        var fileInput = <HTMLInputElement>document.getElementById("file");
                        // check if file has been loaded
                        if (fileInput.files.length == 0) {
                            MsgBox.MessageBox.Instance.ShowModal("SelectDictionary", "Notification");
                            return;                                                       
                        }

                        // get the first file
                        var file = fileInput.files.item(0);                                              

                        // close dialog
                        $(this).dialog("close");

                        // invoke the upload handler
                        uploadHandler(file);
                    }
                },
                {
                    id: "btnCancel",
                    text: $cancelButtonName,
                    click: function () {
                        $(this).dialog("close");
                    }
                },
            ]
        });
    }

    // shows the upload dictionary dialog
    public ShowCityUploadDialog(uploadHandler: ICitySelectedDelegate) {
        // localize buttons
        var $uploadButtonName = this.mLocalization.Get("Upload");
        var $cancelButtonName = this.mLocalization.Get("Cancel");
        var $noFile = this.mLocalization.Get("NoFile");

        // init dialog buttons
        $("#idChooseCityFile").button();

        // init choose file handler
        $('#cityFile').change(function () {
            $(this).siblings('.text').text(this.value || $noFile)
        });

        // run the dialog
        $("#idCityUpload").dialog({
            width: 500,
            height: 300,
            modal: true,
            buttons: [
                {
                    id: "btnUpload",
                    text: $uploadButtonName,
                    click: function () {
                        var fileInput = <HTMLInputElement>document.getElementById("cityFile");
                        // check if file has been loaded
                        if (fileInput.files.length == 0) {
                            MsgBox.MessageBox.Instance.ShowModal("SelectCity", "Notification");
                            return;
                        }

                        // get the first file
                        var file = fileInput.files.item(0);

                        // close dialog
                        $(this).dialog("close");

                        // invoke the upload handler
                        uploadHandler(file);
                    }
                },
                {
                    id: "btnCancel",
                    text: $cancelButtonName,
                    click: function () {
                        $(this).dialog("close");
                    }
                },
            ]
        });
    }

    // shows the dialog where a user can download the exported source code of dictionary
    public ShowDictionaryDownloadDialog() {
        // localize close button
        var $closeButtonName = this.mLocalization.Get("Close");

        // init dialog buttons
        $("#idDownloadDictionaryCommand").button();

        // add button handler
        $("#idDownloadDictionaryCommand").click(function () {
            window.location.href = "/Pages/Download.aspx";
        });

        // run the dialog
        $("#idDictionaryDownload").dialog({
            width: 550,
            height: 300,
            modal: true,
            buttons: [{
                id: "btnClose",
                text: $closeButtonName,
                click: function () {
                    $(this).dialog("close");
                }
            }
            ]
        });
    }

    // shows the dialog where a user can download the exported source code of dictionary
    public ShowCityDownloadDialog() {
        // localize close button
        var $closeButtonName = this.mLocalization.Get("Close");

        // init dialog buttons
        $("#idDownloadCityCommand").button();

        // add button handler
        $("#idDownloadCityCommand").click(function () {
            window.location.href = "/Pages/Download.aspx";
        });

        // run the dialog
        $("#idCityDownload").dialog({
            width: 570,
            height: 350,
            modal: true,
            buttons: [{
                id: "btnClose",
                text: $closeButtonName,
                click: function () {
                    $(this).dialog("close");
                }
            }
            ]
        });
    }

    // shows the dialog where a user can download the exported source code of dictionary
    public ShowAuthors() {
        // localize close button
        var $closeButtonName = this.mLocalization.Get("Close");

        // run the dialog
        $("#idAuthors").dialog({
            width: 500,
            height: 320,
            draggable: false,
            resizable: false,
            modal: true,
            buttons: [{
                id: "btnClose",
                text: $closeButtonName,
                click: function () {
                    $(this).dialog("close");
                }
            }
            ]
        });
    }

    // shows the help dialog
    public ShowHelp(): void {
        // calculate position
        var margin = 10;
        var height = $(window).innerHeight() - 2 * margin;
        var width = ($(window).innerWidth() / 2) - 2 * margin;

        // init variables
        var chapters: Array<Array<string>> = null;

        // run the dialog
        $("#idHelp").dialog({
            position: [margin, margin],
            width: width,
            height: height,
            modal: false,
            open: function (event, ui) {
                // get the list of chapters
                $.getJSON("/Help/Chapters.js", function (data, textStatus, jqXHR) {
                    chapters = data;

                    // create the help summary
                    var htmlContent = "";
                    for (var i = 0; i < chapters.length; i++) {
                        // get the chapter
                        var chapter = chapters[i];

                        // prepare the item HTML
                        var htmlItem = "<li class=\"ui-widget\" data-file=\"" + chapter[1] + "\" >";
                        htmlItem += chapter[0];
                        htmlItem += "</li>";

                        // add to the global HTML
                        htmlContent += htmlItem;
                    }

                    // set the HTML content
                    $("#idChapterList").html(htmlContent);

                    // make it the selectable
                    $("#idChapterList").selectable({
                        selected: function (event, ui) {
                            // get the file name
                            var item = ui.selected;
                            var file = $(item).attr("data-file");

                            // clear the chapter
                            $("#idChapterContent").html("");

                            // check file exists
                            if (file != null && file != "") {
                                $("#idChapterContent").load(file);
                            }
                        }
                    });

                    // select the first chapter
                    SelectSelectableElement($("#idChapterList"), $("#idChapterList > li:first-child"));                    
                });
            }
        });
    }
}
